'use client';

import { useState } from 'react';
import { FAQ, FaqCategory } from '../faq/data';
import FaqAccordion from './FaqAccordion';

type CategorizedFaqsProps = {
  faqs: FAQ[];
  categories: FaqCategory[];
};

export default function CategorizedFaqs({ faqs, categories }: CategorizedFaqsProps) {
  const [activeCategory, setActiveCategory] = useState<FaqCategory | 'all'>('all');
  
  const filteredFaqs = activeCategory === 'all' 
    ? faqs 
    : faqs.filter(faq => faq.category === activeCategory);
  
  return (
    <>
      {/* 类别选择器 */}
      <div className="flex flex-wrap justify-center gap-2 mb-8">
        <button
          key="all"
          className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
            activeCategory === 'all'
              ? `bg-primary-500 text-white`
              : `bg-gray-100 text-gray-700 hover:bg-gray-200`
          }`}
          onClick={() => setActiveCategory('all')}
        >
          全部问题
        </button>
        {categories.map((category) => (
          <button
            key={category}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              activeCategory === category
                ? `bg-primary-500 text-white`
                : `bg-gray-100 text-gray-700 hover:bg-gray-200`
            }`}
            onClick={() => setActiveCategory(category)}
          >
            {category}
          </button>
        ))}
      </div>
      
      {/* FAQ列表 */}
      <FaqAccordion faqs={filteredFaqs} />
    </>
  );
} 